<template>
    <div class="statistics-details">
        <div class="head-box">
            <div class="title">{{ title }}</div>
            <!-- <div class="icon"><i class="el-icon-download"></i></div> -->
        </div>
        <div class="details-all">
            <div class="details-top">
                <div class="details-num">
                    <div class="title">销售额</div>
                    <div class="num">{{ countAll.buy_amount_sys }}</div>
                </div>
                <div class="details-num">
                    <div class="title">利润额</div>
                    <div class="num">{{ countAll.buy_amount_sys }}</div>
                </div>
            </div>
            <div class="details-bottom">
                <div class="details-num">
                    <div class="title">进货额</div>
                    <div class="num">{{ countAll.buy_amount_sys }}</div>
                </div>
                <div class="details-num">
                    <div class="title">销售额</div>
                    <div class="num">{{ countAll.buy_amount_sys }}</div>
                </div>
                <div class="details-num">
                    <div class="title">进货量</div>
                    <div class="num">{{ countAll.buy_amount_sys }}</div>
                </div>
            </div>
        </div>
        <div
            class="list-day-box comm-list"
            v-if="data_list.length > 0"
            v-infinite-scroll="loadFun"
        >
            <div
                class="list-day-row"
                v-for="(item, index) in data_list"
                :key="index"
            >
                <div class="list-day-info">
                    <div class="tiem">{{ item.timestr }}</div>
                    <div class="num">
                        <span>利润额 {{ item.sell_amount }}</span>
                        <span>进货额 {{ item.sell_amount }}</span>
                        <span>销售额 {{ item.sell_amount }}</span>
                    </div>
                </div>
                <div
                    class="list-row"
                    v-for="(items, indexs) in item.ls"
                    :key="indexs"
                >
                    <div class="user-info">
                        <div class="user">
                            <span>{{ items.h_i }}</span>
                            <span>{{ items.customer_name }}</span>
                            <span>{{ items.cellphone }}</span>
                        </div>
                        <div class="num">利润{{ items.amount }}</div>
                    </div>
                    <div class="good-info">
                        <div class="img-box">
                            <img :src="items.img ? items.img : img_buf" />
                        </div>
                        <div class="info">
                            <div class="title">
                                {{ items.title }}
                            </div>
                            <div class="doc">AHC | AHC水乳套装 680771</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import staticConst from "@/js/const/StaticConst.js";
import empty from "@/components/comm/empty.vue";

export default {
    props: [],
    components: { empty },
    computed: {},
    data() {
        return {
            title: "",
            img_buf: staticConst.GOOD_IMG,
            is_soll: true,
            searchform: {
                customerid: "",
                groupid: "0",
                pfrom: 0,
                pnum: 20,
                stime: "",
                dtime: "",
                time: "",
            },
            data_list: [],
            countAll: {},
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData(data) {
            this.emptyFun();
            this.searchform.customerid = data.customerid;
            this.searchform.stime = data.stime || data.timestr;
            this.searchform.dtime = data.dtime || "";
            this.searchform.time = data.group;
            this.searchform.groupid = data.groupid;
            this.getDetailsFun();
        },
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getDetailsFun();
        },
        async getDetailsFun() {
            this.is_soll = true;
            let url = config.ASSQ_COUNT_DETAIL;
            let param = this.searchform;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.data.title) {
                this.title = res.data.title;
            }
            if (res.data.count_all) {
                this.countAll = res.data.count_all;
            }
            if (res.data.count_ls) {
                this.data_list = this.data_list.concat(res.data.count_ls);
                setTimeout(() => {
                    this.is_soll = false;
                }, 300);
            } else {
                this.is_soll = true;
                this.$msg({ title: "暂无数据" });
            }
        },
        emptyFun() {
            this.data_list = [];
            this.searchform.pfrom = 0;
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped >
.statistics-details {
    width: calc(100% - 850px);
    height: 100vh;
    .head-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        height: 39px;
        padding: 0 10px;
        border-bottom: 1px solid #ededed;
        i {
            font-size: 22px;
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .details-all {
        padding: 5px 10px;
        border-bottom: 1px solid #ededed;
        .details-top {
            display: flex;
            .details-num {
                font-size: 14px;
                flex: 1;

                .num {
                    font-size: 26px;
                    color: #3388ff;
                    font-weight: bold;
                }
            }
        }
        .details-bottom {
            display: flex;
            .details-num {
                font-size: 14px;
                flex: 1;
            }
        }
    }
    .list-day-box {
        height: calc(100% - 177px);

        .list-day-row {
            .list-day-info {
                padding: 7.5px;
                background: #f3f3f2;
                color: #666;
                font-size: 14px;
                display: flex;
                justify-content: space-between;

                .num {
                    span {
                        margin-left: 10px;
                    }
                }
            }
            .list-row {
                padding: 10px;
                border-bottom: 1px solid #ededed;
                &:last-child {
                    border: none;
                }
                .user-info {
                    font-weight: bold;
                    font-size: 14px;
                    display: flex;
                    margin-bottom: 10px;
                    justify-content: space-between;
                    .user {
                        span {
                            margin-right: 10px;
                        }
                    }
                }
                .good-info {
                    display: flex;
                    .img-box {
                        margin-right: 10px;
                        width: 60px;
                        height: 60px;
                        border-radius: 5px;
                        overflow: hidden;
                        background: #ededed;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .info {
                        width: calc(100% - 90px);
                        display: flex;
                        align-content: space-between;
                        flex-wrap: wrap;
                        .title {
                            width: 100%;
                        }
                        .doc {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>
